<template>
  <div class='dashboard-container'>
    <div class="app-container">
      <el-card shadow="never">
        <!-- 学科名称 搜索 -->
        <el-form :model="data" ref="formData">
          <div>
            <el-form-item prop="subjectName">
            <h3>学科名称</h3>
              <el-input
              @keyup.enter="hFilter"
                style="width: 200px; margin-left: 10px"
                :placeholder="$t('table.search')"
                class="filter-item"
                v-model="data.subjectName"
              ></el-input>
              <el-button
               class="filter-item"
                size="small"
                type="reset"
                @click="hResetForm('data')"
                style="margin-left: 10px;">
                清除</el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="hFilter"
              >搜索</el-button>
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-top: 15px"
                @click="hChange('add')"
                type="success"
                icon="el-icon-edit"
              >新增学科</el-button>
            </el-form-item>
          </div>
        </el-form>
        <el-alert
          class="alert"
           v-if="alertText !== ''"
          :title="alertText"
          :closable="false"
          type="info"
          show-icon>
        </el-alert>
        <!-- 数据列表table -->
        <el-table
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学科名称">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <template slot-scope="scope">
              <span>{{scope.row.isFrontDisplay===1 ? '是' : '否'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="二级目录">
            <template slot-scope="scope">
              <span>{{scope.row.twoLevelDirectory}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标签">
            <template slot-scope="scope">
              <span>{{scope.row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题目数量">
            <template slot-scope="scope">
              <span>{{scope.row.totals}}</span>
            </template>
          </el-table-column>

          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="hDirectorys(scope.row)">学科分类</el-button>
              <el-button type="text" size="mini" @click="hTags(scope.row)">学科标签</el-button>
              <el-button type="text" size="mini" @click="hChange(scope.row.id)">修改</el-button>
              <el-button type="text" size="mini" @click="hRemoveSubject(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination fr">
          <div class="pages">
             <!-- :page-size="Number(requestParameters.pageSize)"
              :total="Number(total)">-->
            <el-pagination
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
              :current-page="requestParameters.page"
              :page-sizes="[10, 20, 30, 40]"
              background
              layout="prev, pager, next, sizes, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>

        <!-- @add="hAddSubject()" -->
        <SubjectsAdd ref="editSubject" :titleInfo="titleInfo" :Subject="formData" :getlist="getlist"></SubjectsAdd>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detail, remove } from '@/api/hmmm/subjects'
import SubjectsAdd from './../components/subjects-add'
export default {
  name: 'My-subjects',
  components: {
    SubjectsAdd
  },
  data () {
    return {
      SubjectsAdd: 'subjectsAdd',
      dataList: [],
      listLoading: true,
      alertText: '',
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      titleInfo: {
        pageTitle: '学科', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        subjectName: '',
        isFrontDisplay: false,
        id: ''
      },
      data: {
        subjectName: ''
      }

    }
  },
  created () {
    this.getlist()
  },
  methods: {
    // 进入某一页
    hCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.requestParameters.page = val
      this.getlist()
    },
    // 获取数据列表
    async getlist (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      console.log(111, res, this.requestParameters)
      this.dataList = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 搜索信息 查询
    async hFilter () {
      this.requestParameters.page = 1
      //  this.getlist(this.requestParameters)
      const data = this.data
      const res = await list(data)
      console.log('查询', res)
      this.dataList = res.data.items
      this.total = res.data.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    // 每页显示信息条数
    hSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.requestParameters.pagesize = val
      this.requestParameters.page = 1
      this.getlist(this.requestParameters)
    },

    // 通过ID来判断是新增弹框，还是修改弹框
    hChange (id) {
      // 调用子组件中的方法，弹出弹框
      this.$refs.editSubject.dialogFormV()
      if (id === 'add') {
        this.titleInfo.text = '新增'
      } else {
        this.titleInfo.text = '修改'
        // 是修改学科的时候获取学科详情
        this.hAmendForm(id)
      }
    },
    // 清除输入框中内容
    hResetForm () {
      this.$refs.formData.resetFields()
      this.getlist()
    },

    // 修改前
    // 获取学科详情
    async hAmendForm (objId) {
      this.formData.id = objId
      const { data: res } = await detail({ id: objId })
      console.log(222, res)
      this.formData.subjectName = res.subjectName
      // console.log(this.formData.subjectName)
      this.formData.isFrontDisplay = !!res.isFrontDisplay
      // console.log(this.formData.isFrontDisplay)
      // console.log(this.formData)
      // this.formData = res
    },

    // 删除
    hRemoveSubject (subject) {
      this.$confirm('此操作将永久删除学科, 是否继续？', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: subject })
            .then(response => {
              this.$message.success('删除成功！')
              this.dataList.splice(subject, 1)
              this.getlist(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败！')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作！')
        })
    },
    hTags (row) {
      const id = row.id
      const name = row.subjectName
      this.$router.push({
        path: 'tags',
        query: { id, name }
      })
    },
    hDirectorys (row) {
      const id = row.id
      console.log(id)
      const name = row.subjectName
      this.$router.push({
        path: 'directorys',
        query: { id, name }
      })
    }
  }
}

</script>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
h3 {
  display: inline-block;
}
 .alert {
  margin: 10px 0px;
}
.pagination {
  margin:  10px 0px;
}
</style>
